<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="24">
        <el-row :gutter="16">
          <el-col :span="24">
            <el-alert type="warning" :closable="false">
              <slot name="title">
                <strong style="font-size: 15px">
                  当前毕业年份：{{ currentYear }}届，统计截止日期：
                  {{
                    parseTime(fileUploadDate, '{y}年{m}月{d}日 {h}时{i}分{s}秒')
                  }}
                </strong>
              </slot>
            </el-alert>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top: 15px">
          <el-col :span="4">
            <ele-card>
              <template #header>
                <span class="card-span">全国系统人数</span>
              </template>
              <div class="mini-card-word">
                {{ currentNationwideSystemCount }} 人
              </div>
            </ele-card>
          </el-col>
          <el-col :span="4">
            <ele-card>
              <template #header>
                <span class="card-span">就业情况</span>
              </template>
              <div class="mini-card-word">
                {{ currentEmploymentCount }} 人<span> / </span
                >{{ currentEmploymentRate }}
              </div>
            </ele-card>
          </el-col>
          <el-col :span="4">
            <ele-card>
              <template #header>
                <span class="card-span">签约情况</span>
              </template>
              <div class="mini-card-word">
                {{ currentSigningCount }} 人<span> / </span>
                {{ currentSigningRate }}
              </div>
            </ele-card>
          </el-col>
          <el-col :span="4">
            <ele-card>
              <template #header>
                <span class="card-span">困难生就业情况</span>
              </template>
              <div class="mini-card-word">
                {{ currentDifficultyEmploymentCount }} 人<span> / </span>
                {{ currentDifficultyCount }} 人<span> / </span>
                {{ currentDifficultyEmploymentRate }}
              </div>
            </ele-card>
          </el-col>
          <el-col :span="4">
            <ele-card>
              <template #header>
                <span class="card-span">自由职业情况</span>
              </template>
              <div class="mini-card-word">
                {{ currentLiberalEmploymentCount }} 人<span> / </span>
                {{ currentLiberalEmploymentRate }}
              </div>
            </ele-card>
          </el-col>
          <el-col :span="4">
            <ele-card>
              <template #header>
                <span class="card-span">灵活就业情况</span>
              </template>
              <div class="mini-card-word">
                {{ currentNimbleEmploymentCount }} 人<span> / </span>
                {{ currentNimbleEmploymentRate }}
              </div>
            </ele-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :span="24">
        <ele-card>
          <template #header>
            <div class="card-span">
              <span>推荐表采集情况</span>
            </div>
          </template>
          <div class="progress-container">
            <div class="progress-column">
              <div class="progress-title">学生提交进度</div>
              <div class="progress">
                <el-progress
                  :percentage="collectProgress * 100"
                  color="#409EFF"
                  striped
                ></el-progress>
              </div>
            </div>
            <div class="progress-column">
              <div class="progress-title">提交审核进度</div>
              <div class="progress">
                <el-progress
                  :percentage="checkProgress * 100"
                  color="#67C23A"
                  striped
                ></el-progress>
              </div>
            </div>
          </div>
        </ele-card>
      </el-col>
    </el-row>
    <el-row>
      <ele-card style="width: 100%">
        <template #header>
          <span>快捷操作</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="quick-item">
              <router-link
                :to="'/counsellor/recommend/student/list'"
                class="quick-link"
              >
                <div class="quick-img">
                  <img
                    src="@/assets/quit/recommend.png"
                    alt="推荐表管理"
                    width="42"
                  />
                </div>
                <div class="quick-text"> 推荐表管理</div>
              </router-link>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="quick-item">
              <router-link
                :to="'/counsellor/employment/statistic/report/list'"
                class="quick-link"
              >
                <div class="quick-img">
                  <img
                    src="@/assets/quit/statistic.png"
                    alt="就业统计"
                    width="42"
                  />
                </div>
                <div class="quick-text"> 就业报表</div>
              </router-link>
            </div>
          </el-col>
        </el-row>
      </ele-card>
    </el-row>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { counsellorIndexInit } from '@/api/index.js';
  import { parseTime } from '@/utils/linyang';

  const currentNationwideSystemCount = ref(null);

  //当前毕业年份
  const currentYear = ref(null);
  const currentEmploymentCount = ref(null);
  const currentEmploymentRate = ref(null);
  const currentSigningCount = ref(null);
  const currentSigningRate = ref(null);

  const lastDate = ref(null);

  const currentDifficultyCount = ref(null);
  const currentDifficultyEmploymentCount = ref(null);
  const currentDifficultyEmploymentRate = ref(null);

  const currentNimbleEmploymentCount = ref(null); //灵活就业人数
  const currentNimbleEmploymentRate = ref(null); //灵活就业比率

  const currentLiberalEmploymentCount = ref(null); //自由职业人数
  const currentLiberalEmploymentRate = ref(null); //自由职业比率

  const fileUploadDate = ref(null);

  const checkProgress = ref(null);
  const collectProgress = ref(null);

  const props = defineProps({
    /** 修改回显的数据 */
    roleKey: String
  });

  if (props.roleKey === 'counsellor') {
    counsellorIndexInit().then((res) => {
      console.log(res.data);
      currentYear.value = res.data.currentYear;
      currentNationwideSystemCount.value =
        res.data.currentNationwideSystemCount;
      lastDate.value = res.data.lastDate;

      currentEmploymentCount.value = res.data.currentEmploymentCount;
      currentEmploymentRate.value = res.data.currentEmploymentRate;

      currentSigningCount.value = res.data.currentSigningCount;
      currentSigningRate.value = res.data.currentSigningRate;

      currentDifficultyCount.value = res.data.currentDifficultyCount;
      currentDifficultyEmploymentCount.value =
        res.data.currentDifficultyEmploymentCount;
      currentDifficultyEmploymentRate.value =
        res.data.currentDifficultyEmploymentRate;

      currentNimbleEmploymentCount.value =
        res.data.currentNimbleEmploymentCount;
      currentNimbleEmploymentRate.value = res.data.currentNimbleEmploymentRate;

      currentLiberalEmploymentCount.value =
        res.data.currentLiberalEmploymentCount;
      currentLiberalEmploymentRate.value =
        res.data.currentLiberalEmploymentRate;

      fileUploadDate.value = res.data.fileUploadDate;

      checkProgress.value = res.data.checkProgress;
      collectProgress.value = res.data.collectProgress;
    });
  }
</script>

<style scoped>
  .quick-item {
    cursor: pointer;

    .quick-img {
      padding-top: 10px;
      text-align: center;
      height: 52px;
      object-fit: contain;
    }

    .quick-text {
      text-align: center;
      font-weight: bold;
    }

    padding-bottom: 20px;
  }

  @keyframes flipHorizontal {
    0% {
      transform: scaleX(1); /* 初始状态，不翻转 */
    }
    50% {
      transform: scaleX(-1); /* 中间状态，开始翻转 */
    }
    100% {
      transform: scaleX(1); /* 结束状态，再次回到不翻转 */
    }
  }

  .quick-link {
    color: inherit;
    text-decoration: none;
    user-select: none;
  }

  .quick-item:hover {
    .quick-img img {
      animation: flipHorizontal 1s; /* 应用动画，持续2秒，无限循环 */
    }

    .quick-text {
      color: #909399;
    }
  }

  .card-span {
    color: #5abae0;
  }

  .mini-card-word {
    font-size: 16px;
    font-weight: bold;
    font-family: 'Microsoft YaHei', serif;
    color: #303133;

    span {
      font-size: 14px;
      color: #dcdfe6;
    }
  }

  .progress-container {
    display: flex; /* 设置为Flex容器 */
    flex-direction: row; /* 子元素水平排列 */
    column-gap: 20px;

    .progress-column {
      flex: 1; /* 让两个列等宽 */
      /* 或者为每个列指定不同的宽度 */
      /* width: 50%; */

      .progress-title {
        color: #303133;
        font-weight: bold;
      }
    }
  }
</style>
